<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡</title>
    <link rel="stylesheet" href="./tabs.css" />
  </head>
  <body>
    <div class="tabs">
      <!-- 选项卡标题 -->
      <ul class="tab-header">
        <li class="active" onclick="tab(this)" onmouseover="tab(this)">
          前端开发
        </li>
        <li onclick="tab(this)" onmouseover="tab(this)">UI/UE设计</li>
        <li onclick="tab(this)" onmouseover="tab(this)">Python开发</li>
      </ul>
      <!-- 选项卡内容 -->
      <ul class="tab-content">
        <li class="show">
          前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
        </li>
        <li>UI设置为产品的“脸面”</li>
        <li>Python是一个面向对象的解释型高级编程语言</li>
      </ul>
    </div>
  </body>
  <script>
    var tHeadLis = document
      .getElementsByClassName("tab-header")[0]
      .getElementsByTagName("li");
    var tContentLis = document
      .getElementsByClassName("tab-content")[0]
      .getElementsByTagName("li");

    // 此做法为在li标签上绑定事件通过this传回当前DOM然后通过for循环去匹配当前DOM
    function tab(tab) {
      // 通过this可以获取当前DOM
      // console.log(tab);
      for (var i = 0; i < tHeadLis.length; i++) {
        if (tHeadLis[i] === tab) {
          // tab.classList.add("active");
          tHeadLis[i].classList.add("active");
          tContentLis[i].classList.add("show");
          console.log(tHeadLis[i]);
          //两者的下标相对应，通过下标相关联
        } else {
          tHeadLis[i].classList.remove("active");
          tContentLis[i].classList.remove("show");
        }
      }
    }
  </script>
</html>
